先建置 Vue 資料的基本狀態:

<script>
var app = new Vue({
  el: '#app',
  data: {
    isTransform: false,
    boxColor: false,
    objectClass: {
      'rotate': false,
      'bg-danger': false,
    },
    arrayClass: [],
    styleObject: {
      backgroundColor: 'red',
      borderWidth: '5px'
    },
    styleObject2: {
      boxShadow: '3px 3px 5px rgba(0, 0, 0, 0.16)'
    },
    styleObject3: {
      userSelect: 'none'
    }
  },
});
</script>

我們在動態切換 class 的時候會採用 v-bind 指令來綁定 class 屬性，但除了一種 class 之外我們也可以採用多種 class 並可以用物件的寫法來撰寫，例如下面的例子，我們把 .rotate 和 .bg-danger 兩種 class 寫成物件並綁在 .box 內，再藉由 button 的 click 和 input 的 checkbox 勾選來切換資料狀態，進而達到添加 class 到 .box 內:

<div id="app">
  <h4>物件寫法</h4>
  <div class="box" :class="{ 'rotate' : isTransform , 'bg-danger' : boxColor }"></div>
  <p>請為此元素加上動態 className</p>
  <hr>
  <button class="btn btn-outline-primary" v-on:click="isTransform = !isTransform">選轉物件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle1" v-model="boxColor">
    <label class="form-check-label" for="classToggle1">切換色彩</label>
  </div>
</div>

除了可以直接在 class 內用物件的寫法來撰寫之外，我們也可以把這些 class 在 Vue 內單獨寫成一個物件:

<div id="app">
  <h5>物件寫法 2</h5>
  <div class="box" :class="objectClass"></div>
  <hr>
  <button class="btn btn-outline-primary" @click="objectClass.rotate = !objectClass.rotate">選轉物件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle2" v-model="objectClass['bg-danger']">
    <label class="form-check-label" for="classToggle2">切換色彩</label>
  </div>
</div>

上述除了 .box 內的動態 class 換成物件的資料狀態外，對於 button 的 click 和 input 的 checkbox 的勾選，資料綁定上都要採用讀取物件屬性的方式

除了物件的寫法，我們也可以採用陣列的寫法，而這個寫法適合不知道 class 有多少個時候做使用，如下:

<div id="app">
  <h4>陣列寫法</h4>
  <button class="btn" :class="['btn-outline-primary','active']">請操作本元件</button>
</div>

以上我們是直接把 class 直接寫在陣列內，而我們也可以用預先定義好的空陣列綁上去，再藉由 button 的 click 和 input checkbox 的勾選來改變資料狀態:

<div id="app">
  <h4>陣列寫法</h4>
  <button class="btn" :class="arrayClass">請操作本元件</button>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle3" v-model="arrayClass" value="btn-outline-primary">
    <label class="form-check-label" for="classToggle3">切換樣式</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="classToggle4" v-model="arrayClass" value="active">
    <label class="form-check-label" for="classToggle4">啟用元素狀態</label>
  </div>
</div>

這裡要注意的是，input 的 v-model 綁定了 arrayClass 但是 class 的名字是藉由 value 這個屬性傳送進去的

再來是行內樣式，上述講到了物件的寫法和陣列的寫法，那當然行內樣式我們也可以採用相同的方式:

<div class="box" :style="{ 'backgroundColor': 'red'}"></div>

值得一提的是，style 屬性必須要用駝峰式來撰寫，而我們不只可以添加一種屬性，也可以添加多種，就像物件那樣:

<div class="box" :style="{ 'backgroundColor': 'red', 'borderWidth':'5px'}"></div>

最後我們也可以把這些屬性寫成物件放進去:

<div class="box" :style="styleObject"></div>

當然我們也可以用陣列的方式傳送多個物件:

<div class="box" :style="[styleObject,styleObject2]"></div>